<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
    <style>
        .box1,
        .box2,
        .box3,
        .box4,
        .box5 {
            width: 200px;
            height: 200px; 
        }


        .box1 {
            background-image: linear-gradient(red 50px, #bfa 100px, orange 200px);

            /* 通过渐变可以设置一些复杂的背景颜色，可以实现从一个颜色向其它颜色过滤的效果
               渐变是图片，要通过background-image:来设置、

               线性渐变,颜色沿着一条直线发生变化
                    linear-gradient(red,yellow)红色开头，黄色在结尾，中间是过度区域
                       线性渐变的开头我们可以指定一个渐变的方向
                        to left
                        to right
                        to  bottom  默认值
                        to top

                    xxxdeg deg表示度数
                    .5turn = 180deg = to top 半圈

                    渐变可以同时指定多个颜色，多个颜色下平均分配
                   
             */
            /* background-image: linear-gradient(red,yellow,#bfa,orange); */
            /* background-image: linear-gradient(red 50px, #bfa 100px, green 180px, orange 200px); */
            /* 指定颜色开始位置 */
            margin: 50px auto;
        }
       

        .box2 {
            /*    repeating-linear-gradient()可以平铺的线性渐变*/
            background-image: repeating-linear-gradient(red 50px, yellow 100px);
            margin: 50px auto;
        }

        .box3{
            /* radial-gradient() 径向渐变（发散）
              默认情况下，径向渐变的形状，根据元素的形状来计算
              正方形-----圆形
              长方形-----椭圆
                也可以手动设置径向渐变的大小
                circle  圆
                elipse  椭圆

                 也可以指定渐变的位置
                  background-image: repeating-radial-gradient(50px 50px at 0 0,red,rgb(122, 78, 206));
                 
            
            */
            background-image: repeating-radial-gradient(50px 50px at 0 0,red,rgb(122, 78, 206));
            /* background-image: repeating-radial-gradient(50px 50px,red,rgb(122, 78, 206)); */
            /* background-image: radial-gradient(100px 100px,red,rgb(122, 78, 206)); */
  

            margin: 50px auto;
        }
        .box4{
            /* 指定渐变的位置
              语法
                 radial-gradient（大小 at 位置，颜色1，颜色2，颜色n）
                 大小
                 circle           圆形
                  elipse          椭圆
                  closest-side    近边
                  closest-corner   近角
                  farthest-side      远边
                  farthest-corner      远角

                  位置
                  top right left center bottom
            
             */
            background-image: radial-gradient(farthest-corner at 100px 100px,red,rgb(122, 78, 206));
            margin: 50px auto;
        }

        .box5{
            background-image: repeating-radial-gradient( at 100px 100px ,orange,rgb(24, 55, 126));
            margin: 50px auto;
        }

    </style>
</head>

<body>
    <div class="box1"></div>
    <div class="box2"></div>
    <div class="box3"></div>
    <div class="box4"></div>
    <div class="box5"></div>
</body>

</html>